<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态添加选项功能</title>
    <link rel="stylesheet" href="../css/common.css">
    <style>
        div{
            margin: 20px;
        }
        ul{
            margin-bottom: 20px;
        }
        ul span{
            display: inline-block;
            width: 20px;
        }
        ul button{
            padding: 0 10px;
            margin: 0 2px;
        }
    </style>
</head>
<body>
    <div>
        <ul>
            <li><span></span><input><button class="up">↑</button><button class="down">↓</button><button class="del">del</button></li>
            <li><span></span><input><button class="up">↑</button><button class="down">↓</button><button class="del">del</button></li>
            <li><span></span><input><button class="up">↑</button><button class="down">↓</button><button class="del">del</button></li>
            <li><span></span><input><button class="up">↑</button><button class="down">↓</button><button class="del">del</button></li>
        </ul>
        <button class="add">添加选项</button>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script>
        //删除按钮点击事件
        $('ul').on('click','.del',function(){
            $(this).parent('li').remove()
            sort()  //调用排序的方法
        })
        //上按钮点击事件
        $('ul').on('click','.up',function(){
            //获取当前li
            let cli = $(this).parents('li')
            //获取上一个li
            let uli = $(this).parents('li').prev()
            uli.before(cli)
            sort()  //调用排序的方法
        })
        //下按钮点击事件
        $('ul').on('click','.down',function(){
            //获取当前li
            let cli = $(this).parents('li')
            //获取下一个li
            let dli = $(this).parents('li').next()
            dli.after(cli)
            sort()  //调用排序的方法
        })
        //添加选项按钮点击事件
        $('.add').click(function(){
            let span = $('<span/>')
            let input = $('<input/>')
            let btn1 = $('<button class="up"/>').text('↑')
            let btn2 = $('<button class="down"/>').text('↓')
            let btn3 = $('<button class="del"/>').text('del')
            let li = $('<li/>')
            li.append(span)
            li.append(input)
            li.append(btn1)
            li.append(btn2)
            li.append(btn3)
            $('ul').append(li)
            sort()  //调用排序的方法
        })
        //排序方法
        let str = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'
        function sort(){
            //循环ul里面的所有li
            $('ul>li').each(function(index,li){
                //给li里面的span标签添加序号
                $(li).find('span').text(str[index]+'.')
                //第一个li里面的上按钮禁用
                if(index===0){
                    $(li).find('button:eq(0)').prop('disabled',true)
                }else{
                    $(li).find('button:eq(0)').prop('disabled',false)
                }
                //最后一个li里面的下按钮禁用
                if(index===$('ul>li').length-1){
                    $(li).find('button:eq(1)').prop('disabled',true)
                }else{
                    $(li).find('button:eq(1)').prop('disabled',false)
                }
            })
        }
        sort()
    </script>
</body>
</html>